<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-box">
      <view class="search-input">
        <uni-icons type="search" size="16" color="#999"></uni-icons>
        <input type="text" v-model="searchKey" placeholder="搜索活动" @input="onSearch"/>
      </view>
    </view>
    
    <!-- 活动列表 -->
    <view class="activity-list">
      <view class="activity-item" v-for="(item, index) in activityList" 
            :key="index" @click="goToDetail(item.id)">
        <image :src="item.image" mode="aspectFill" class="activity-image"></image>
        <view class="activity-info">
          <text class="activity-title">{{item.title}}</text>
          <text class="activity-org">{{item.organization}}</text>
          <text class="activity-status">{{item.status}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKey: '',
      activityList: [
        {
          id: 1,
          title: '校园文化节',
          organization: '学生会',
          status: '报名中',
          image: 'https://picsum.photos/200/150?random=1'
        },
        {
          id: 2,
          title: '创新创业大赛',
          organization: '教务处',
          status: '进行中',
          image: 'https://picsum.photos/200/150?random=2'
        },
        {
          id: 3,
          title: '篮球联赛',
          organization: '体育部',
          status: '报名截止',
          image: 'https://picsum.photos/200/150?random=3'
        },
        {
          id: 4,
          title: '志愿者服务活动',
          organization: '青年志愿者协会',
          status: '报名中',
          image: 'https://picsum.photos/200/150?random=4'
        },
        {
          id: 5,
          title: '英语演讲比赛',
          organization: '外语学院',
          status: '即将开始',
          image: 'https://picsum.photos/200/150?random=5'
        },
        {
          id: 6,
          title: '程序设计大赛',
          organization: '计算机学院',
          status: '报名中',
          image: 'https://picsum.photos/200/150?random=6'
        },
        {
          id: 7,
          title: '校园歌手大赛',
          organization: '艺术学院',
          status: '进行中',
          image: 'https://picsum.photos/200/150?random=7'
        },
        {
          id: 8,
          title: '读书分享会',
          organization: '图书馆',
          status: '报名中',
          image: 'https://picsum.photos/200/150?random=8'
        }
      ]
    }
  },
  methods: {
    onSearch(e) {
      const keyword = this.searchKey.toLowerCase()
      if (!keyword) {
        // 如果搜索框为空，恢复所有数据
        this.activityList = this.getDefaultList()
        return
      }
      // 搜索过滤
      this.activityList = this.getDefaultList().filter(item => 
        item.title.toLowerCase().includes(keyword) ||
        item.organization.toLowerCase().includes(keyword)
      )
    },
    goToDetail(id) {
      console.log('跳转到详情页，id:', id)
      uni.navigateTo({
        url: '/pages/detail/detail?id=' + id,
        success: (res) => {
          console.log('跳转成功', res)
        },
        fail: (err) => {
          console.error('跳转失败:', err)
          uni.showToast({
            title: '跳转失败',
            icon: 'none'
          })
        }
      })
    },
    // 获取默认列表数据的方法
    getDefaultList() {
      return [
        {
          id: 1,
          title: '校园文化节',
          organization: '学生会',
          status: '报名中',
          image: 'https://picsum.photos/200/150?random=1'
        },
        {
          id: 2,
          title: '创新创业大赛',
          organization: '教务处',
          status: '进行中',
          image: 'https://picsum.photos/200/150?random=2'
        },
        {
          id: 3,
          title: '篮球联赛',
          organization: '体育部',
          status: '报名截止',
          image: 'https://picsum.photos/200/150?random=3'
        },
        {
          id: 4,
          title: '志愿者服务活动',
          organization: '青年志愿者协会',
          status: '报名中',
          image: 'https://picsum.photos/200/150?random=4'
        },
        {
          id: 5,
          title: '英语演讲比赛',
          organization: '外语学院',
          status: '即将开始',
          image: 'https://picsum.photos/200/150?random=5'
        },
        {
          id: 6,
          title: '程序设计大赛',
          organization: '计算机学院',
          status: '报名中',
          image: 'https://picsum.photos/200/150?random=6'
        },
        {
          id: 7,
          title: '校园歌手大赛',
          organization: '艺术学院',
          status: '进行中',
          image: 'https://picsum.photos/200/150?random=7'
        },
        {
          id: 8,
          title: '读书分享会',
          organization: '图书馆',
          status: '报名中',
          image: 'https://picsum.photos/200/150?random=8'
        }
      ]
    }
  },
  onLoad() {
    console.log('搜索页面加载完成')
  }
}
</script>

<style>
.container {
  padding: 20rpx;
}

.search-box {
  padding: 20rpx;
  background: #fff;
}

.search-input {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
}

.search-input input {
  flex: 1;
  margin-left: 10rpx;
  font-size: 28rpx;
}

.activity-list {
  margin-top: 20rpx;
}

.activity-item {
  display: flex;
  padding: 20rpx;
  background: #fff;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
}

.activity-image {
  width: 200rpx;
  height: 150rpx;
  border-radius: 8rpx;
}

.activity-info {
  flex: 1;
  margin-left: 20rpx;
}

.activity-title {
  font-size: 32rpx;
  font-weight: bold;
}

.activity-org {
  font-size: 26rpx;
  color: #666;
  margin: 10rpx 0;
}

.activity-status {
  font-size: 24rpx;
  color: #007AFF;
}
</style> 